<template>
    <div>
        <div ref="code"></div>
        <div class="flex flex-row text-sm Serif-Bolder">
            <span class="block">
                <a :href="endpointUrl" v-if="endpointUrl" @click="jump">{{
                    endpointUrl
                }}</a>
                <span v-else @click="getEndPoint">获取 EndPoint</span>
            </span>
            <slot></slot>

            <span class="block"> 代码模板 </span>
        </div>
    </div>
</template>

<script>
export default {
    mounted() {
        window.Preload.getRunkit().then(() => {
            this.init();
        });
    },
    props: {
        value: {
            type: String,
            default() {
                return "";
            },
        },
    },
    data() {
        return {
            endpointUrl: null,
            runkit: null,
        };
    },
    beforeDestroy() {
        this.runkit?.destroy();
    },

    methods: {
        jump() {},
        getEndPoint() {
            this.runkit.getEndpointURL().then((res) => {
                this.endpointUrl = res;
            });
        },
        init() {
            this.runkit = window.RunKit.createNotebook({
                element: this.$refs.code,
                source: this.value,
                gutterStyle: "inside",
                nodeVersion: "16.10.0",
                onSave: () => {
                    this.runkit.getSource().then((code) => {
                        this.$emit("input", code);
                    });
                },
            });
            console.log(this.runkit);
        },
    },
};
</script>

<style lang="less" scoped>
.block {
    @apply bg-green-500 text-white cursor-pointer p-2 hover:bg-yellow-500 transition mx-1;
}
</style>
